Vue.component('one', {
    template: '#tmp1',
    data: function () {
        return {
            list: [],
        }
    },
    created() {
        var that = this;
        $.ajax({
            url: app.webUrl + "/basic/api_article/lists",
            data: { mid: 5 },
            type: "GET",
            success: function (ret) {
                console.log(ret);

                for (var item in ret.data) {
                    that.list.push(ret.data[item]);
                }
                console.log(that.list);
                $(document).ready(function () {
                    $(".item").click(function () {
                        $(this.children[2]).slideToggle("fast");
                        if ($(this.children[1]).attr("src") == "/public/img/fanhui_right.png") {
                            $(this.children[1]).attr({
                                "src": "/public/img/xiala.png"
                            });
                            $(this.children[1]).addClass("xiala");
                        } else {
                            $(this.children[1]).attr({
                                "src": "/public/img/fanhui_right.png"
                            });
                            $(this.children[1]).removeClass("xiala");
                        }
                    });
                    $("#one").addClass("bottomBorder");
                });
            }
        });
    },
    mounted() {

    },
    destroyed() {
        $("#one").removeClass("bottomBorder");
    },
    methods: {

    },
});
Vue.component('two', {
    template: '#tmp2',
    data: function () {
        return {
            list: [],
        }
    },
    created() {
        var that = this;
        $.ajax({
            url: app.webUrl + "/basic/api_article/lists",
            data: { mid: 6 },
            type: "GET",
            success: function (ret) {
                for (var item in ret.data) {
                    that.list.push(ret.data[item]);
                }
                $(document).ready(function () {
                    $(".item").click(function () {
                        $(this.children[2]).slideToggle("fast");
                        if ($(this.children[1]).attr("src") == "/public/img/fanhui_right.png") {
                            $(this.children[1]).attr({
                                "src": "/public/img/xiala.png"
                            });
                            $(this.children[1]).addClass("xiala");
                        } else {
                            $(this.children[1]).attr({
                                "src": "/public/img/fanhui_right.png"
                            });
                            $(this.children[1]).removeClass("xiala");
                        }
                    });
                    $("#two").addClass("bottomBorder");
                });
            }
        });
    },
    mounted() {

    },
    destroyed() {
        $("#two").removeClass("bottomBorder");
    },
});
Vue.component('three', {
    template: '#tmp3',
    data: function () {
        return {
            list: [],
        }
    },
    created() {
        var that = this;
        $.ajax({
            url: app.webUrl + "/basic/api_article/lists",
            data: { mid: 7 },
            type: "GET",
            success: function (ret) {
                for (var item in ret.data) {
                    that.list.push(ret.data[item]);
                }

                $(document).ready(function () {
                    $(".item").click(function () {
                        $(this.children[2]).slideToggle("fast");
                        if ($(this.children[1]).attr("src") == "/public/img/fanhui_right.png") {
                            $(this.children[1]).attr({
                                "src": "/public/img/xiala.png"
                            });
                            $(this.children[1]).addClass("xiala");
                        } else {
                            $(this.children[1]).attr({
                                "src": "/public/img/fanhui_right.png"
                            });
                            $(this.children[1]).removeClass("xiala");
                        }
                    });
                    $("#three").addClass("bottomBorder");
                });
            }
        });
    },
    mounted() {
    },
    destroyed() {
        $("#three").removeClass("bottomBorder");
    },
});
Vue.component('four', {
    template: '#tmp4',
    data: function () {
        return {
            list: [],
        }
    },
    created() {
        var that = this;
        $.ajax({
            url: app.webUrl + "/basic/api_article/lists",
            data: { mid: 8 },
            type: "GET",
            success: function (ret) {
                for (var item in ret.data) {
                    that.list.push(ret.data[item]);
                }

                $(document).ready(function () {
                    $(".item").click(function () {
                        $(this.children[2]).slideToggle("fast");
                        if ($(this.children[1]).attr("src") == "/public/img/fanhui_right.png") {
                            $(this.children[1]).attr({
                                "src": "/public/img/xiala.png"
                            });
                            $(this.children[1]).addClass("xiala");
                        } else {
                            $(this.children[1]).attr({
                                "src": "/public/img/fanhui_right.png"
                            });
                            $(this.children[1]).removeClass("xiala");
                        }
                    });
                    $("#four").addClass("bottomBorder");
                });
            }

        });
    },
    mounted() {
    },
    destroyed() {
        $("#four").removeClass("bottomBorder");
    },
});

var vm = new Vue({
    el: "#app",
    data: {
        comName: "one",
    },
    methods: {

    },
});